<template>
  <view>
    <!-- ------------------------ 顶logo**start ------------------------ -->
    <view class="logo-top">
      <!-- <image class="img" :src="logoImg" mode="aspectFill"></image> -->
      <image class="img" :src="`${baseUrl}/images/brand/${groupInfo[1].logoUlr}`" mode="aspectFill"></image>
    </view>
    <!-- ------------------------ swiper**start ------------------------ -->
    <view class="swiper-ware">
      <u-swiper radius="0" circular height="66.6vw" :current="currIndex" imgMode="aspectFill" keyName="image"
        :list="swiperImg" @click="previewPhoto" indicatorStyle="right: 20px" @change="swiperChange" :autoplay="false">
        <view slot="indicator" class="indicator-num">
          <text class="indicator-num__text">{{ currentNum }}/{{ swiperImg.length }}</text>
        </view>
      </u-swiper>
      <!-- v-if="currIndex > 0" -->
      <!-- v-if="currIndex + 1 < swiperImg.length" -->
      <view class="btn-ware">
        <view class="btn btn-l" @click="switchImg('left')">
          <uni-icons size="40rpx" color="#fff" type="left"></uni-icons>
        </view>
        <view class="btn btn-r" @click="switchImg('right')">
          <uni-icons size="40rpx" color="#fff" type="right"></uni-icons>
        </view>
      </view>

    </view>
    <!-- ------------------------ 公司介绍**start ------------------------ -->
    <view class="company-introduction">
      <!-- <view class="text_box">
        {{ groupInfo[1].info }}
      </view> -->
      <view class="title">{{ brandTitle }}</view>
      <view class="content">{{ brandContent }}</view>
      <!-- <view class="title">
        ZEEKR 香港及澳門
      </view>
      <view class="content">
        隨著瞬息萬變的市場環境，錦龍汽車集團於
        2023 年 10 月正式成為 ZEEKR 於香港及澳門市場的進口商和經銷商，引入品牌的全新車型系列，以滿足港澳消費者對高品質、高性能電動汽車的需求。
      </view>
      <view class="content">
        ZEEKR是一家以智能化、數字化、數據驅動的智能出行科技公司，定位於豪華智能純電品牌。自成立以來致力於智慧電動出行前瞻技術的研發，在寧波、浙江、哥德堡以及上海設立了研發中心，透過模組化研發、虛擬工程、軟體系統開發持續創新，打造業界領先的智慧科技全端自研能力。
      </view>
      <view class="content">
        在2023年上海車展上 ZEEKR 更正式發布歐洲戰略，開啟進軍全球市場的步伐，以卓越的產品、直營模式、一站式服務這三大商業支柱開拓歐洲市場，力爭年成為歐洲電動車市場領導品牌，為全球用戶帶來極致的豪華智慧純電出行體驗。
      </view> -->

    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { logoImg, swiperImg } from '@/static/js/staticData'
import { companyListApi, brandAreaList } from '@/API/reqData'
export default {
  data() {
    return {
      logoImg,
      currPhoto: 0,
      currIndex: 0,
      currentNum: 1,
      swiperImg,
      baseUrl: this.$baseUrl,
    }
  },
  onLoad() {
    // 混合分享信息
    this.shareMixin.title = `關於ZEEKR`
    this.shareMixin.path = `/pages/StorePage/StoreSee`

    // let temp = this.groupInfo[1].info
    // let index = temp.indexOf('\n')
    // let temp2 = temp.slice(0, index)
    // console.log('temp2 :>> ', temp2);
    // let temp3 = temp.substring(index)
    // console.log('temp3 :>> ', temp3);

  },
  methods: {
    // 预览图片
    previewPhoto(i) {
      this.currPhoto = i
      uni.previewImage({
        current: this.currPhoto,
        urls: this.imglist
      })
    },
    switchImg(e) {
      let len = this.swiperImg.length - 1
      if (e === 'left') {
        this.currIndex = this.currIndex > 0 ? this.currIndex - 1 : len
      }
      if (e === 'right') {
        this.currIndex = this.currIndex < len ? this.currIndex + 1 : 0
      }
    },
    swiperChange(e) {
      this.currentNum = e.current + 1
      this.currIndex = e.current
      // console.log('e :>> ', e);
    },
    ...mapMutations(['saveLatLog']),
  },
  computed: {
    ...mapState(['latLog', 'groupInfo']),
    brandIntroduce() {
      return this.groupInfo?.[1]?.info
    },
    brandTitle() {
      let index = this.brandIntroduce?.indexOf('\n') || ''
      return this.brandIntroduce.slice(0, index)
    },
    brandContent() {
      let index = this.brandIntroduce?.indexOf('\n') || ''
      return this.brandIntroduce.substring(index + 1)
    }

  },
}
</script>
<style lang="scss">
// ------------------------ 顶logo**start ------------------------
.logo-top {
  width: 400rpx;
  height: 180rpx;
  margin: 0 auto;

  // .img {
  //   image-rendering: auto;
  //   image-rendering: pixelated;
  //   image-rendering: crisp-edges;
  // }
}

.swiper-ware {
  position: relative;

  .btn-ware {
    width: 100%;

    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.35);
      padding: 12rpx;
    }

    .btn-l {
      left: 10rpx;
    }

    .btn-r {
      right: 10rpx;
    }
  }

  .indicator-num {
    padding: 2px 0;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 100px;
    width: 35px;
    @include flex;
    justify-content: center;

    &__text {
      color: #ffffff;
      font-size: 12px;
    }
  }


}

// ------------------------ 公司介绍**start ------------------------
.company-introduction {
  padding: 40rpx 40rpx 80rpx 40rpx;
  white-space: pre-line;
  margin-bottom: 30rpx;

  .text_box {
    width: 100%;
    white-space: pre-line;
    padding-left: 16rpx;
    padding-right: 10rpx;
  }

  .title {
    margin-top: 20rpx;
    // line-height: 40rpx;
    font-weight: 900;
    font-size: 32rpx;
    color: #000;
    white-space: pre-line;
  }

  .content {
    font-size: 28rpx;
    padding-bottom: 20rpx;
    white-space: pre-line;
  }
}
</style>
